<template>
	<view class="pupop">
		<view class="popup-box" :animation="animationData">
			<view class="pupop-btn">
				<view class="btn-top">
					<view @tap="cancel"></view>
					<view>{{textTips}}</view>
				</view>
				<!-- <view @tap="cancel">取消</view>
				<view @tap="confirm" style="color: #2979ff;">确定</view> -->
			</view>
			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column v-if="column == 3">
					<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
			<view class="btn-bottom">
				<view @tap="cancel">取消</view>
				<view @tap="confirm">确定</view>
			</view>
		</view>
		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
import {getRegionTree} from '@/apis/parts.js'; 
export default {
	data() {
		return {
			value: [],
			addressList:[],
			provinceList: [],
			cityList: [],
			areaList: [],
			indicatorStyle: 'height: 50px;',
			provinceIndex: 0,
			cityIndex: 0,
			areaIndex: 0,
			animationData: {}
		};
	},
	props: {
		column: {
			type: Number,
			default: 3
		},
		defaultValue: {
			type: String,
			default: () => ''
		},
		visible: {
			type: Boolean,
			default: () => false
		},
		maskCloseAble: {
			type: Boolean,
			default: () => true
		},
		textTips:{
			type:String,
			default:'选择所在地区'
		}
	},
	watch: {
		visible (val) {
			this.changeActive();
		}
	},
	created() {
		this.getRegionTree();
	},
	mounted() {
		setTimeout(()=>{
			this.init();
		},1000);
	},
	methods: {
		getRegionTree() {
			return  new Promise((reslove) => {
				getRegionTree({}).then(({data})=>{
					this.addressList = data || [];
					reslove();
				});
			});
		},
		init () {
			var provinceList = [];
			this.addressList.filter(item => {
				provinceList.push({
					code: item.code,
					name: item.name
				});
			});
			this.provinceList = [...provinceList];
			if (!this.defaultValue) {
				this.cityList = this.addressList[0].children;
				this.areaList = this.addressList[0].children[0].children;
			} else {
				var city = {11:'北京',12:'天津',13:'河北',14:'山西',15:'内蒙古',21:'辽宁',22:'吉林',23:'黑龙江 ',31:'上海',32:'江苏',33:'浙江',34:'安徽',35:'福建',36:'江西',37:'山东',41:'河南',42:'湖北 ',43:'湖南',44:'广东',45:'广西',46:'海南',50:'重庆',51:'四川',52:'贵州',53:'云南',54:'西藏 ',61:'陕西',62:'甘肃',63:'青海',64:'宁夏',65:'新疆',71:'台湾',81:'香港',82:'澳门',91:'国外 '};
				if (city[this.defaultValue.substring(0 ,2)]) {
					var province = this.defaultValue.substring(0, 2);
					var city = this.defaultValue.substring(0, 4);
					this.provinceIndex = 0;
					this.cityIndex = 0;
					this.areaIndex = 0;
					this.provinceIndex = this.addressList.findIndex(obj => {
						return obj.code == province;
					});
					this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0;
					this.cityList = this.addressList[this.provinceIndex].children;
					this.cityIndex = this.cityList.findIndex(obj => {
						return obj.code == city;
					});
					this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0;
					this.areaList = this.cityList[this.cityIndex].children;
					this.areaIndex = this.areaList.findIndex(obj => {
						return obj.code == this.defaultValue;
					});
					this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0;
					this.$nextTick(() => {
						if (this.column == 3) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]));
						} else if (this.column == 2) {
							this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]));
						}
					});
				} else {
					uni.showToast({
						title: '地区编码格式不正确',
						icon: 'none'
					});
					console.log('地区编码格式不正确');
				}
			}
			this.changeActive();
		},
		confirm () {
			if (this.column == 3) {
				this.$emit('confirm', {
					code: this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
					provinceCode: this.addressList[this.provinceIndex].code,
					cityCode: this.addressList[this.provinceIndex].children[this.cityIndex].code,
					name: this.addressList[this.provinceIndex].name + this.addressList[this.provinceIndex].children[this.cityIndex].name + this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
					provinceName: this.addressList[this.provinceIndex].name,
					cityName: this.addressList[this.provinceIndex].children[this.cityIndex].name,
					areaName: this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
				});
			} else if (this.column == 2) {
				this.$emit('confirm', {
					code: this.addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code.substring(0, 4) + '00',
					name: this.addressList[this.provinceIndex].name + this.addressList[this.provinceIndex].children[this.cityIndex].name,
					provinceName: this.addressList[this.provinceIndex].name,
					cityName: this.addressList[this.provinceIndex].children[this.cityIndex].name
				});
			} else {
				uni.showToast({
					title: '目前column只能传2和3',
					icon: 'none'
				});
			}
		},
		cancel () {
			this.$emit('cancel');
		},
		// 动画
		changeActive () {
			var active = '-415px';
			if (this.visible) {
				active = 0;
			}
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'linear'
			});
			animation.bottom(active).step();
			this.animationData = animation.export();
		},
		bindChange(e) {
			e.detail.value[0] = e.detail.value[0] || 0;
			e.detail.value[1] = e.detail.value[1] || 0;
			e.detail.value[2] = e.detail.value[2] || 0;
			if (e.detail.value[0] != this.provinceIndex) {
				// console.log('监听第一列')
				this.provinceChange(e.detail.value[0]);
			} else if (e.detail.value[1] != this.cityIndex) {
				// console.log('监听第二列')
				this.cityChange(e.detail.value[1]);
			} else if (e.detail.value[2] != this.areaIndex) {
				// console.log('监听第三列')
				this.areaChange(e.detail.value[2]);
			}
		},
		// 监听第一列变化
		provinceChange (e) {
			this.provinceIndex = e;
			this.cityIndex = 0;
			this.areaIndex = 0;
			this.value = [...[e, 0, 0]];
			this.cityList = this.addressList[e].children;
			this.areaList = this.addressList[e].children[0].children;
		},
		// 监听第二列变化
		cityChange (e) {
			this.cityIndex = e;
			this.areaIndex = 0;
			// console.log(this.cityIndex, this.areaIndex)
			this.value = [...[this.provinceIndex, e, 0]];
			this.cityList = this.addressList[this.provinceIndex].children;
			this.areaList = this.addressList[this.provinceIndex].children[e].children;
		},
		// 监听第三列变化
		areaChange (e) {
			this.areaIndex = e;
		},
		// 点击模态框
		close () {
			if (this.maskCloseAble) {
				this.cancel();
			}
		}
	}
};
</script>

<style scoped lang="scss">
	.pupop {
		.popup-box {
			position: fixed;
			left: 0;
			bottom: -415px;
			z-index: 301;
			background: #fff;
			padding-bottom: 10px;
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;
			.pupop-btn{
				height: 40px;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				justify-content: space-between;
				.btn-top{
					width: 100%;
					view:nth-of-type(1){
						margin: 20rpx auto;
						width: 64rpx;
						height: 10rpx;
						background: #d8d8d8;
						border-radius: 6rpx;

					}
					view:nth-of-type(2){
						font-size: 16px;
						font-weight: 600;
						color: #333333;
					}

				}
				
			}
			.btn-bottom{
				display: flex;
				padding: 20rpx 38rpx;
				border-top: 2rpx #eee solid;
				view{
					display: flex;
					flex: 1;
					height: 70rpx;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
				}
				view:nth-of-type(1){
					background-color: #f5fbff;
					color: #0091ff;
					border-top-left-radius: 8rpx;
					border-bottom-left-radius: 8rpx;
				}
				view:nth-of-type(2){
					border-top-right-radius: 8rpx;
					border-bottom-right-radius: 8rpx;
					background-color: #0091FF;
					color: #fff;
				}
			}
		}
		.pupop-model {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
			background: rgba(0, 0, 0, .5);
		}
		.pupop-models{
			display: none;
		}
		.picker-view {
			width: 750rpx;
			height: 225px;
			margin-top: 20rpx;
		}
		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50px;
		}
	}
</style>
